<template>
  <div class="team-root">
    <ViewHead></ViewHead>
    <div class="root-content yj" style="background-color:#ffffff;height:100%">
      <el-tabs @tab-click="onActivePanel" stretch tab-position="left" v-model="activeTabs" style="padding-left:10px;padding-right:10px;height:100%">
        <el-tab-pane id="team-root-user-panel" label="用户管理" name="user">
          <el-scrollbar v-show="config.rights.team_user_manager" ref="userscrollbar" style="height:100%">
            <div class="query-menu yj" :class="isFixedTop && 'query-menu-fixed-top-team'">
              <div class="divline" style="width:100px;">
                <el-button type="primary" icon="el-icon-user" @click="onAddUser" size="mini">添加用户</el-button>
              </div>
              <div class="divline" style="width: 150px">
                <el-input placeholder="登录名称" v-model="userQuery.username" clearable size="mini"></el-input>
              </div>
              <div class="divline" style="width: 150px">
                <el-input placeholder="用户名称" v-model="userQuery.selfname" clearable size="mini"></el-input>
              </div>
              <div class="divline" style="width:100px;">
                <el-button @click="onQueryUserList" icon="el-icon-search" size="mini">查 询</el-button>
              </div>
            </div>
            <el-table :data="users" border style="width: 100%;height:100%">
              <el-table-column prop="username" label="登录名称">
              </el-table-column>
              <el-table-column prop="selfname" label="用户名称">
              </el-table-column>
              <el-table-column prop="roleName" label="所属角色">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" title="编辑信息" @click="onEditUser(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                  <el-button size="mini" title="重置登录密码" @click="onResetPasswordDialog(scope.row)" type="primary" icon="el-icon-key" circle></el-button>
                  <el-button size="mini" title="删除用户" @click="onDeleteUser(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="height:20px;"></div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="角色管理" name="role" style="height:100%">
          <el-row v-show="config.rights.team_role_manager" style="height:100%">
            <el-col :span="5" style="border-right:solid 1px #e8e8e8;">
              <div id="team-root-role-roles-panel">
                <el-scrollbar ref="rolescrollbar" style="height:100%">
                  <div style="padding-top:10px;padding-right:10px;">
                    <el-button size="mini" style="width:100%" @click="role.visible = true">添加角色</el-button>
                  </div>
                  <div style="padding-top:10px;padding-right:10px;">
                    <TeamRoleItem :activeid="roleActiveid" :id="item.id" :title="item.title" v-bind:key="item.id" v-for="item in roles"></TeamRoleItem>
                  </div>
                </el-scrollbar>
              </div>
            </el-col>
            <el-col v-show="roleActiveid !==null" :span="19" id="team-root-role-rights-panel">
              <div v-show="roleActiveid !=='0'" class="role-title">
                <el-divider direction="vertical"></el-divider>用户组权限管理
              </div>
              <el-row v-show="roleActiveid !=='0'" style="padding-top:10px;padding-left:10px;">
                <el-col :span="6">
                  <el-card class="box-card">
                    <div class="rolename">团队相关</div>
                    <el-row>
                      <el-col :span="12">
                        <el-checkbox v-model="rights.team_user_manager" @change="onChangeRoleRight">用户管理</el-checkbox>
                      </el-col>
                      <el-col :span="12">
                        <el-checkbox v-model="rights.team_role_manager" @change="onChangeRoleRight">角色管理</el-checkbox>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="box-card">
                    <div class="rolename">设备相关</div>
                    <el-row>
                      <el-col :span="12">
                        <el-checkbox v-model="rights.device_device_select" @change="onChangeRoleRight">查询设备</el-checkbox>
                      </el-col>
                      <el-col :span="12">
                        <el-checkbox v-model="rights.device_device_manager" @change="onChangeRoleRight">管理设备</el-checkbox>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-checkbox v-model="rights.device_node_select" @change="onChangeRoleRight">查询节点</el-checkbox>
                      </el-col>
                      <el-col :span="12">
                        <el-checkbox v-model="rights.device_node_manager" @change="onChangeRoleRight">管理节点</el-checkbox>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-checkbox v-model="rights.device_remotecpe" @change="onChangeRoleRight">远程设备</el-checkbox>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="box-card">
                    <div class="rolename">审计相关</div>
                    <el-row>
                      <el-col :span="12">
                        <el-checkbox v-model="rights.browser_audit_video_list" @change="onChangeRoleRight">查询录像</el-checkbox>
                      </el-col>
                      <el-col :span="12">
                        <el-checkbox v-model="rights.browser_audit_video_manger" @change="onChangeRoleRight">管理录像</el-checkbox>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
              <el-divider style="margin-bottom:0px;"></el-divider>
              <div class="role-title" style="margin-bottom:10px;">
                <el-divider class="line" direction="vertical"></el-divider>用户管理
                <el-select size="mini" v-model="roleOther.selectusers" filterable multiple collapse-tags style="margin-left: 20px;width:300px" placeholder="添加用户，输入用户名搜索">
                  <el-option v-for="item in roleOther.allingusers" :key="item.id" :label="`${item.username}(${item.selfname})`" :value="item.id">
                  </el-option>
                </el-select>
                <el-button v-show="roleOther.selectusers.length !== 0" @click="onAddRoleUser" type="primary" size="mini" icon="el-icon-user">确定添加</el-button>
              </div>
              <div style="padding-left:10px;">
                <div v-show="roleOther.curusers.length === 0" style="font-size:14px;color:#606266;text-align:center;">无用户</div>
                <el-tag v-for="tag in roleOther.curusers" style="margin-bottom:10px;" disable-transitions :key="tag.id" :closable="tag.id !== config.user.admin_root_uid" @close="onSelectRoleUser(tag)">
                  {{`${tag.username}(${tag.selfname})`}}
                </el-tag>
              </div>
              <div v-show="roleActiveid !=='0'">
                <el-divider style="margin-bottom:0px;"></el-divider>
                <div class="role-title" style="margin-bottom:10px;">
                  <el-divider class="line" direction="vertical"></el-divider>设备节点管理<el-button @click="showNodeDialog" style="margin-left:10px;" icon="el-icon-circle-plus-outline" size="mini" type="primary">添加节点</el-button>
                </div>
                <div style="padding-left:10px;">
                  <div v-show="roleOther.curnodes.length === 0" style="font-size:14px;color:#606266;text-align:center;">无设备节点</div>
                  <el-tag v-for="tag in roleOther.curnodes" style="margin-bottom:10px;" disable-transitions :key="tag.id" closable @close="onSelectRoleNode(tag)">
                    {{tag.title}}
                  </el-tag>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog title="用户信息" :visible.sync="addUser.addUserDialogVisible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <el-form label-width="80px">
        <el-form-item v-show="addUser.openType == 'add'" label="登录名称" size="mini">
          <el-input v-model="addUser.username"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" size="mini">
          <el-input v-model="addUser.selfname"></el-input>
        </el-form-item>
        <el-form-item v-show="addUser.openType == 'add'" label="登录密码" size="mini">
          <el-input v-model="addUser.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserDialogHandleClose" size="mini">取 消</el-button>
        <el-button type="primary" @click="onAddEditUserSubmit" size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="重置密码" :visible.sync="pw.visible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <el-form label-width="80px">
        <el-form-item label="新密码" size="mini">
          <el-input v-model="pw.newpw"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onResetpwDialogHandleClose" size="mini">取 消</el-button>
        <el-button type="primary" @click="onResetPassword" size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="角色信息" :visible.sync="role.visible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <el-form label-width="80px">
        <el-form-item label="角色名称" size="mini">
          <el-input v-model="role.title"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onAddEditRoleDialogHandleClose" size="mini">取 消</el-button>
        <el-button type="primary" @click="onAddEditRoleSubmit" size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="设备节点" :visible.sync="nodeDialog.visible" width="50%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <div>
        <el-scrollbar style="height:100%">
          <el-tree ref="addNodeTree" :default-checked-keys="nodeDialog.curkeys" :check-strictly="true" :data="nodeDialog.treeData" node-key="id" :props="nodeDialog.defaultProps" show-checkbox>
          </el-tree>
        </el-scrollbar>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeNodeDialog" size="mini">取 消</el-button>
        <el-button type="primary" @click="onUpdateRoleNodeSubmit" size="mini">添 加</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import ViewHead from "~/base/ViewHead.vue";
import TeamRoleItem from "~/views/team/TeamRoleItem.vue";

export default {
  name: "Team",
  components: {
    ViewHead,
    TeamRoleItem,
  },
  data() {
    return {
      rights: {
        team_user_manager: false,
        team_role_manager: false,
        device_device_manager: false,
        device_device_select: false,
        device_node_manager: false,
        device_node_select: false,
        device_remotecpe: false,
        browser_audit_video_list: false,
        browser_audit_video_manger: false,
      },
      roleActiveid: null,
      temp: {
        updateUser: null,
      },
      userQuery: {
        username: "",
        selfname: "",
      },
      addUser: {
        openType: "add",
        username: "",
        selfname: "",
        password: "",
        id: null,
        addUserDialogVisible: false,
      },
      pw: {
        visible: false,
        newpw: "",
        id: null,
      },
      role: {
        openType: "add",
        title: "",
        id: null,
        visible: false,
      },
      isFixedTop: false,
      activeTabs: "user",
      users: [],
      roles: [],
      roleOther: {
        allusers: [],
        curusers: [],
        allingusers: [],
        selectusers: [],
        curnodes: [],
      },
      nodeDialog: {
        visible: false,
        treeData: [],
        curkeys: [],
        defaultProps: {
          children: "children",
          label: "label",
        },
      },
    };
  },
  methods: {
    onUpdateRoleNodeSubmit() {
      this.utils.http(
        "post",
        "/webapi/role/node/update",
        {
          roleId: this.roleActiveid,
          ids: this.$refs.addNodeTree.getCheckedKeys().join(","),
        },
        () => {
          this.closeNodeDialog();
          this.loadRoleNodeForRightSelect();
        }
      );
    },
    showNodeDialog() {
      this.nodeDialog.visible = true;
      this.utils.http("get", "/webapi/device/node/tree", {}, (resp) => {
        this.nodeDialog.treeData = resp;
        for (const item of this.roleOther.curnodes) {
          this.nodeDialog.curkeys.push(item.id);
        }
      });
    },
    closeNodeDialog() {
      this.nodeDialog.visible = false;
      this.nodeDialog.treeData = [];
      this.nodeDialog.curkeys = [];
    },
    loadFirstRoleData() {
      this.selectRole(this.roles[0].id);
    },
    onSelectRoleNode(node) {
      this.utils.http(
        "post",
        "/webapi/role/node/delete",
        {
          roleId: this.roleActiveid,
          nodeId: node.id,
        },
        () => {
          this.loadRoleNodeForRightSelect();
        }
      );
    },
    onSelectRoleUser(data) {
      this.utils.http(
        "post",
        "/webapi/role/user/delete",
        {
          roleId: this.roleActiveid,
          uid: data.id,
        },
        () => {
          this.loadRoleUserForRightSelect();
        }
      );
    },
    delAllingusers(uid) {
      for (let index = 0; index < this.roleOther.curusers.length; index++) {
        const element = this.roleOther.curusers[index];
        if (element.id === uid) {
          this.roleOther.curusers.splice(index, 1);
          break;
        }
      }
    },
    onAddRoleUser() {
      this.utils.http(
        "post",
        "/webapi/role/user/add",
        {
          roleId: this.roleActiveid,
          uids: this.roleOther.selectusers.join(","),
        },
        () => {
          this.$notify({
            title: "角色管理",
            message: "添加成功",
            type: "success",
          });
          this.roleOther.selectusers = [];
          this.loadRoleUserForRightSelect();
        }
      );
    },
    onActivePanel(obj) {
      if (obj.name === "user") {
        this.switchUserPanel();
      } else if (obj.name === "role") {
        this.switchRolePanel();
      }
    },
    switchUserPanel() {
      this.userQuery.username = "";
      this.userQuery.selfname = "";
      this.onQueryUserList();
    },
    switchRolePanel() {
      this.onQueryRoleList();
      this.roleActiveid = null;
    },
    selectRole(id) {
      this.roleActiveid = id;
      this.roleOther.selectusers = [];
      this.loadRoleRightTarget();
      this.loadRoleUserForRightSelect();
      this.loadRoleNodeForRightSelect();
    },
    cleanSelectedRightTarget() {
      this.rights.team_user_manager = false;
      this.rights.team_role_manager = false;
      this.rights.device_device_manager = false;
      this.rights.device_device_select = false;
      this.rights.device_node_manager = false;
      this.rights.device_node_select = false;
      this.rights.device_remotecpe = false;
      this.rights.browser_audit_video_list = false;
      this.rights.browser_audit_video_manger = false;
    },
    loadRoleNodeForRightSelect() {
      this.roleOther.curnodes = [];
      this.utils.http(
        "get",
        "/webapi/role/node/list/get",
        { roleId: this.roleActiveid },
        (resp) => {
          for (const item of resp) {
            this.roleOther.curnodes.push({
              id: item.id,
              title: item.title,
            });
          }
        }
      );
    },
    loadRoleUserForRightSelect() {
      this.roleOther.curusers = [];
      this.utils.http(
        "get",
        "/webapi/role/user/list/get",
        { roleId: this.roleActiveid },
        (resp) => {
          for (const item of resp) {
            this.roleOther.curusers.push({
              id: item.id,
              username: item.username,
              selfname: item.selfname,
              roleName: item.roleName,
            });
          }
          this.loadAllUserForRightSelect();
        }
      );
    },
    loadAllUserForRightSelect() {
      this.roleOther.allusers = [];
      this.utils.http("get", "/webapi/user/list/get", {}, (resp) => {
        for (const item of resp) {
          this.roleOther.allusers.push({
            id: item.id,
            username: item.username,
            selfname: item.selfname,
            roleName: item.roleName,
          });
        }
        this.handlerSelectRoleUserAndAllUserData();
      });
    },
    handlerSelectRoleUserAndAllUserData() {
      this.roleOther.allingusers = [];
      for (const item of this.roleOther.allusers) {
        if (this.existCurusers(item.id)) {
          continue;
        }
        this.roleOther.allingusers.push(item);
      }
    },
    existCurusers(uid) {
      if (uid === this.config.user.admin_root_uid) {
        return true;
      }

      for (const item of this.roleOther.curusers) {
        if (item.id === uid) {
          return true;
        }
      }
      return false;
    },
    loadRoleRightTarget() {
      this.cleanSelectedRightTarget();
      this.utils.http(
        "get",
        "/webapi/role/right/list/get",
        {
          roleId: this.roleActiveid,
        },
        (resp) => {
          for (const item of resp) {
            this.rights[item] = true;
          }
        }
      );
    },
    onChangeRoleRight() {
      this.utils.http(
        "post",
        "/webapi/role/right/update",
        {
          id: this.roleActiveid,
          rights: this.rights,
        },
        () => {}
      );
    },
    onShowRoleDelete(id, title) {
      this.$confirm(`确定删除 ${title} 角色?`, "删除角色", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.utils.http(
            "post",
            "/webapi/role/delete",
            {
              id,
            },
            () => {
              this.$notify({
                title: "角色管理",
                message: "删除角色成功",
                type: "success",
              });
              for (let index = 0; index < this.roles.length; index++) {
                const item = this.roles[index];
                if (item.id !== id) {
                  continue;
                }
                this.roles.splice(index, 1);
                break;
              }
              if (this.roleActiveid === id) {
                this.loadFirstRoleData();
              }
            }
          );
        })
        .catch(() => {});
    },
    onShowRoleUpdateDialog(id, title) {
      this.role.visible = true;
      this.role.id = id;
      this.role.openType = "update";
      this.role.title = title;
    },
    onAddEditRoleSubmit() {
      if (!this.role.title) {
        this.$notify({
          title: "角色管理",
          message: "角色名称不能为空",
          type: "warning",
        });
        return;
      }
      if (this.role.openType == "add") {
        this.utils.http(
          "post",
          "/webapi/role/add",
          {
            title: this.role.title,
          },
          (data) => {
            this.$notify({
              title: "角色管理",
              message: "添加角色成功",
              type: "success",
            });
            this.roles.unshift({
              id: data.id,
              title: data.title,
            });
            this.onAddEditRoleDialogHandleClose();
          }
        );
        return;
      }

      this.utils.http(
        "post",
        "/webapi/role/update",
        {
          id: this.role.id + "",
          title: this.role.title,
        },
        () => {
          this.$notify({
            title: "角色管理",
            message: "编辑角色成功",
            type: "success",
          });
          for (let index = 0; index < this.roles.length; index++) {
            const item = this.roles[index];
            if (item.id != this.role.id) {
              continue;
            }
            item.title = this.role.title;
            break;
          }
          this.onAddEditRoleDialogHandleClose();
        }
      );
    },
    onResetPasswordDialog(user) {
      this.pw.id = user.id;
      this.pw.visible = true;
    },
    onResetPassword() {
      let msg = "";
      if (!this.pw.newpw) {
        msg = "用户密码不能为空";
      } else if (this.pw.newpw.length < 5) {
        msg = "用户密码不能小于6位";
      }

      if (msg) {
        this.$notify({
          title: "重置密码",
          message: msg,
          type: "warning",
        });
        return;
      }

      this.utils.http(
        "post",
        "/webapi/user/password/reset",
        {
          uid: this.pw.id,
          password: this.$md5(this.pw.newpw),
        },
        () => {
          this.$notify({
            title: "重置密码",
            message: "重置密码成功",
            type: "success",
          });
          this.onResetpwDialogHandleClose();
        }
      );
    },
    onDeleteUser(user) {
      this.$confirm(`确定删除 ${user.username} 用户?`, "删除用户", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.utils.http(
            "post",
            "/webapi/user/delete",
            {
              uid: user.id,
            },
            () => {
              this.$notify({
                title: "删除用户",
                message: "删除用户成功",
                type: "success",
              });
              for (let index = 0; index < this.users.length; index++) {
                const item = this.users[index];
                if (item.id !== user.id) {
                  continue;
                }
                this.users.splice(index, 1);
                break;
              }
            }
          );
        })
        .catch(() => {});
    },
    onQueryRoleList() {
      this.roles = [];
      this.utils.http("get", "/webapi/role/list/get", {}, (resp) => {
        for (const item of resp) {
          this.roles.push({
            id: item.id,
            title: item.title,
          });
        }
        this.loadFirstRoleData();
      });
    },
    onQueryUserList() {
      this.users = [];
      this.utils.http(
        "get",
        "/webapi/user/list/get",
        {
          username: this.userQuery.username,
          selfname: this.userQuery.selfname,
        },
        (resp) => {
          for (const item of resp) {
            this.users.push({
              id: item.id,
              username: item.username,
              selfname: item.selfname,
              roleName: item.roleName,
            });
          }
        }
      );
    },
    onEditUser(user) {
      this.addUser.openType = "edit";
      this.addUser.username = user.username;
      this.addUser.selfname = user.selfname;
      this.addUser.id = user.id;
      this.addUser.addUserDialogVisible = true;
      this.temp.updateUser = user;
    },
    checkUserInfo(username, selfname, password) {
      if (
        !selfname ||
        (this.addUser.openType == "add" && (!password || !username))
      ) {
        return "用户信息未填写完整";
      }

      if (this.addUser.openType == "add" && password.length < 5) {
        return "用户密码不能小于6位";
      }

      return "";
    },
    onAddEditUserSubmit() {
      const msg = this.checkUserInfo(
        this.addUser.username,
        this.addUser.selfname,
        this.addUser.password
      );
      if (msg) {
        this.$notify({
          title: "提示",
          message: msg,
          type: "warning",
        });
        return;
      }

      if (this.addUser.openType == "add") {
        this.utils.http(
          "post",
          "/webapi/user/add",
          {
            username: this.addUser.username,
            selfname: this.addUser.selfname,
            password: this.$md5(this.addUser.password),
          },
          (resp) => {
            this.$notify({
              title: "提示",
              message: "添加用户成功",
              type: "success",
            });
            this.addUserDialogHandleClose();
            this.users.unshift({
              id: resp.id,
              username: resp.username,
              selfname: resp.selfname,
            });
          }
        );
        return;
      }

      this.utils.http(
        "post",
        "/webapi/user/update",
        {
          uid: this.addUser.id,
          selfname: this.addUser.selfname,
        },
        () => {
          this.$notify({
            title: "提示",
            message: "编辑用户成功",
            type: "success",
          });
          this.temp.updateUser.selfname = this.addUser.selfname;
          this.addUserDialogHandleClose();
        }
      );
    },
    addUserDialogHandleClose() {
      this.addUser.addUserDialogVisible = false;
      this.addUser.username = "";
      this.addUser.selfname = "";
      this.addUser.password = "";
      this.addUser.id = null;
      this.addUser.openType = "add";
    },
    onAddEditRoleDialogHandleClose() {
      this.role.visible = false;
      this.role.title = "";
      this.role.id = null;
      this.role.openType = "add";
    },
    onResetpwDialogHandleClose() {
      this.pw.visible = false;
      this.pw.newpw = "";
      this.pw.id = null;
    },
    onAddUser() {
      this.addUser.addUserDialogVisible = true;
    },
    makeHeight() {
      return `${this.config.height - 65}px`;
    },
  },
  mounted() {
    this.utils.refreshRootContentHeight();
    this.$jquery("#team-root-user-panel").css("height", this.makeHeight());
    this.$jquery("#team-root-role-roles-panel").css(
      "height",
      this.makeHeight()
    );

    this.utils.on(this._uid, "refresh_height", () => {
      this.utils.refreshRootContentHeight();
      this.$jquery("#team-root-user-panel").css("height", this.makeHeight());
      this.$jquery("#team-root-role-roles-panel").css(
        "height",
        this.makeHeight()
      );
      this.$nextTick(() => {
        this.$refs.userscrollbar.update();
        this.$refs.rolescrollbar.update();
      });
    });

    let scrollbarEl = this.$refs.userscrollbar.wrap;
    scrollbarEl.onscroll = () => {
      if (scrollbarEl.scrollTop > 0) {
        this.isFixedTop = true;
      } else {
        this.isFixedTop = false;
      }
    };

    this.utils.on(
      this._uid,
      "event_team_role_update_delete",
      ({ id, title, action }) => {
        if (action == "update") {
          this.onShowRoleUpdateDialog(id, title);
          return;
        }
        this.onShowRoleDelete(id, title);
      }
    );

    this.utils.on(this._uid, "event_team_role_select_menu_item", ({ id }) => {
      this.selectRole(id);
    });

    this.onQueryUserList();
  },
  destroyed() {
    this.utils.unon(this._uid, "refresh_height");
    this.utils.unon(this._uid, "event_team_role_update_delete");
    this.utils.unon(this._uid, "event_team_role_select_menu_item");
  },
};
</script>

<style>
#team-root-user-panel .el-scrollbar__wrap {
  overflow-x: hidden;
}

.team-root .query-menu {
  padding: 10px 10px 10px 0;
  background-color: #ffffff;
}

.team-root .query-menu-fixed-top-team {
  position: fixed;
  background-color: #71b1f3;
  right: 5px;
  z-index: 10;
  padding: 10px;
}

#team-root-role-roles-panel .el-scrollbar__wrap {
  overflow-x: hidden;
}

#team-root-role-rights-panel .box-card {
  margin-right: 10px;
}

#team-root-role-rights-panel .el-card__body {
  padding: 10px;
}

#team-root-role-rights-panel .box-card .rolename {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

#team-root-role-rights-panel .el-divider--horizontal {
  margin: 10px 0;
}

#team-root-role-rights-panel .el-tag {
  margin-right: 10px;
}

#team-root-role-rights-panel .role-title {
  font-size: 14px;
  color: #606266;
  margin-top: 10px;
  margin-left: 2px;
  font-weight: bold;
}

#team-root-role-rights-panel .el-divider--vertical {
  background-color: #409eff;
  width: 2px;
}
</style>